<!DOCTYPE html>
<html>
<head>
    <#include "/layout/baseHeader.ftl" />
    <style>
        .code {
            color: #aaa;
        }
    </style>
</head>
<body style="background: #333">
<div id="app">
    <div id="log-container" v-html="logContent"
         style="height: 650px; overflow-y: scroll; background: #333; color: #aaa; padding:0 10px;">

    </div>
    <div>
        <Row :gutter="16">
            <i-col span="12">
                <i-input v-model="code" placeholder="请输入执行的命令"></i-input>
                <i-button type="info" @click="startWork">执行</i-button>
                <i-button type="info" @click="stopWork">停止</i-button>
                <i-button type="info" @click="clearLog">清屏</i-button>
            </i-col>
            <i-col span="12">
                <Tabs>
                    <Tab-pane label="aboss151,152">
                        <div class="code">
                            <p>tail -f /Program/tomcat/aboss/apache-tomcat-8.5.20/logs/catalina.out</p>
                            <p>sh /Program/tomcat/aboss/apache-tomcat-8.5.20/bin/shutdown.sh</p>
                            <p>sh /Program/tomcat/aboss/apache-tomcat-8.5.20/bin/startup.sh</p>
                        </div>
                    </Tab-pane>
                    <Tab-pane label="aboss文件服务器">
                        <div class="code">
                            <p>tail -f /home/admin/tomcat/aboss/apache-tomcat-8.5.20/logs/catalina.out</p>
                            <p>sh /home/admin/tomcat/aboss/apache-tomcat-8.5.20/bin/startup.sh</p>
                            <p>sh /home/admin/tomcat/aboss/apache-tomcat-8.5.20/bin/shutdown.sh</p>
                        </div>
                    </Tab-pane>
                    <Tab-pane label="常用命令">
                        <div class="code">
                            <p>ps -ef |grep tomcat</p>
                            <p>ps aux cat /proc/52730/status</p>
                        </div>
                    </Tab-pane>
                </Tabs>

            </i-col>
        </Row>

    </div>
</div>
<script>
    let a = 0;
    //let $div = document.querySelector("#log-container");
    let vm = new Vue({
        el: '#app',
        data: {
            code: 'tail -f /Program/tomcat/aboss/apache-tomcat-8.5.20/logs/catalina.out',
            ws: null,
            logContent: '',
            webHost: window.location.host
        },
        created() {
            this.initWS();
        },
        methods: {
            initWS() {
                // 指定websocket路径
                this.ws = new WebSocket('ws://' + this.webHost + '/logForBingo');
                this.ws.onmessage = function (event) {
                    // 接收服务端的实时日志并添加到HTML页面中
                    if (++a % 2000 === 0) {
                        vm.logContent = event.data;
                    }
                    else {
                        vm.addLog(event.data);
                    }

                    // 滚动条滚动到最低部
//                    $container.scrollTop($div.height() - $container.height());
                };

                this.ws.onopen = function (evt) {
                    vm.addLog('webSocket连接成功<br/>');
                };

                this.ws.onclose = function (evt) {
                    vm.addLog('webSocket关闭成功<br/>');
                };

                this.ws.onerror = function (evt) {
                    PB.alert('出错啦<br/>');
                };
            },
            startWork() {
                this.addLog(this.code);
                switch (this.ws.readyState) {
                    case 0:
                        PB.alert('连接正在打开，请稍后操作');
                        break;
                    case 1:
                        this.ws.send(this.code);
                        break;
                    case 2:
                        PB.alert('连接正在关闭，请稍后操作');
                        break;
                    case 3:
                        this.initWS();
                        setTimeout(() => {
                            this.ws.send(this.code);
                        }, 2000);
                        break;
                }
            },
            stopWork() {
                if (this.ws && this.ws.readyState === 1) {
                    this.ws.close();
                }
            },
            addLog(str) {
                let $div = document.querySelector("#log-container");
                vm.logContent += str;
                $div.scrollTop = $div.scrollHeight;
            },
            clearLog() {
                vm.logContent = '';
            }
        }
    });
</script>
</body>
</html>
